<template>
	<view class="userinfo">
		<view class="info">
			<view class="item">
				<span>头像</span>
				<image src="../../static/avatar.png" mode=""></image>
			</view>
			<view class="item">
				<span>昵称</span>
				<input type="text" style="direction:rtl;" value="Taurus"/>
			</view>
			<view class="item" @click="toPhoneAdnPwdUpd(1)">
				<span>手机号码</span>
				<view class="itx">
					<span>13222222222</span>
					<u-icon name="arrow-right" size="28"></u-icon>
				</view>
			</view>
			<view class="item">
				<span>ID号</span>
				<view class="itx">
					<span>4</span>
					<u-icon name="lock" size="28"></u-icon>
				</view>
			</view>
			<view class="item" @click="toPhoneAdnPwdUpd(2)">
				<span>密码</span>
				<view class="itx">
					<span>点击修改密码</span>
					<u-icon name="arrow-right" size="28"></u-icon>
				</view>
			</view>
		</view>
		<view class="btn">
			<view class="btn1">
				<span>保存修改</span>
			</view>
			<view class="btn2" @click="logout">
				<span>退出登录</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			logout(){
				uni.redirectTo({
					url:"/pages/user/login"
				})
			},
			toPhoneAdnPwdUpd(type){
				if(type==1){
					uni.navigateTo({
						url:"/pages/user/user-phone-edit"
					})
				}else{
					uni.navigateTo({
						url:"/pages/user/user-pwd-edit"
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.userinfo{
	height:100vh;
	background-color:#f5f5f5;
	overflow:hidden;
	.btn{
		.btn1{
			width:85%;
			margin:20px auto;
			height:90rpx;
			text-align:center;
			color:#ffffff;
			line-height:90rpx;
			border-radius:20px;
			background-color:#ff0000;
		}
		.btn2{
			width:85%;
			margin:20px auto;
			height:90rpx;
			text-align:center;
			color:#ff0000;
			line-height:90rpx;
			border-radius:20px;
			border: 1px solid #ff0000;
		}
	}
	.info{
		width:94%;
		background-color:#ffffff;
		margin:10px auto;
		.item{
			display:flex;
			align-items:center;
			justify-content:space-between;
			border-bottom:1px solid #f0f0f0;
			height:130rpx;
			margin: 0 10px;
			image{
				width:90rpx;
				height:90rpx;
			}
			.itx{
				display:flex;
				align-items:center;
			}
		}
	}
}
</style>
